<!-- 条件步骤模态框 -->
<div class="modal fade" id="conditionModal" tabindex="-1" aria-labelledby="conditionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="conditionModalLabel">条件步骤</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="condition-form">
                    <div class="mb-3">
                        <label for="condition-name" class="form-label">步骤名称</label>
                        <input type="text" class="form-control" id="condition-name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="condition-expression" class="form-label">条件表达式 (JavaScript)</label>
                        <textarea class="form-control" id="condition-expression" rows="5" required></textarea>
                        <div class="form-text">
                            <p>条件表达式中可以使用以下变量和函数：</p>
                            <ul>
                                <li><code>context</code>: 包含当前场景执行上下文的对象</li>
                                <li><code>context.variables</code>: 场景变量</li>
                                <li><code>context.previousStep</code>: 上一步执行结果</li>
                                <li><code>getVariable(name)</code>: 获取变量</li>
                            </ul>
                            <p>示例：</p>
                            <pre>// 检查上一步响应状态码是否为200
context.previousStep.response.status === 200

// 检查变量是否存在
getVariable('token') !== undefined

// 检查响应中是否包含特定数据
context.previousStep.response.data.success === true</pre>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">条件为真时执行的步骤</label>
                        <div id="true-steps-container" class="border rounded p-3 mb-3 steps-container">
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle"></i> 拖动步骤到此处
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">条件为假时执行的步骤</label>
                        <div id="false-steps-container" class="border rounded p-3 steps-container">
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle"></i> 拖动步骤到此处
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-condition-btn">保存</button>
            </div>
        </div>
    </div>
</div>